<template>
    <el-dialog v-model="formVisible" @close="closePage" :title="title" align-center width="25%">
        <el-form :model="formData" label-width="85px" :rules="formRules" ref="formRef">
            <el-form-item label="父级部门">
                <el-tree-select :props="treeProps" v-model="formData.parentId" :data="sysDeptTree" check-strictly
                    clearable default-expand-all :render-after-expand="false" check-on-click-node />
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="formData.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门领导" prop="leaderId">
                <el-select v-model="formData.leaderId" placeholder="请选择部门领导" :clearable="true" :filterable="true">
                    <el-option v-for="(item, index) in userList" :label="`${item.realName} (${item.username})`" :value="item.id"
                        :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示顺序" prop="sort">
                <el-input-number v-model="formData.sort" :min="1" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closePage">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import { addReq, updateReq, queryDeptAllTreeReq } from '@/api/sys/dept/index.js'
import { querySysUserAllReq } from '@/api/sys/user/index.js'
import { success } from '@/utils/messageUtils.js'
const treeProps = { label: 'name', value: 'id', children: 'children' }

const formRules = reactive({
    name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
    leaderId: [{ required: true, message: '请选择部门领导', trigger: 'blur' }],
    sort: [{ required: false, message: '请输入显示顺序', trigger: 'blur' }],
})

const formData = reactive({
    id: null,
    name: '',
    parentId: null,
    leaderId: null,
    sort: 1,
    remark: '',
})

const sysDeptTree = ref([])
const userList = ref([])
const formVisible = ref(false)
const title = ref()
const isAdd = ref(true)
const open = (type, row) => {
    Promise.all([
        queryDeptAllTreeReq(),
        querySysUserAllReq(),
    ]).then(([allTreeRes, sysUserAllRes,
    ]) => {
        sysDeptTree.value = allTreeRes.data;
        userList.value = sysUserAllRes.data;
        // 重置表单
        formRef.value?.resetFields()
        if (type == 'updateRow') {
            title.value = '修改部门'
            isAdd.value = false

            formData.id = row.id
            formData.name = row.name
            formData.parentId = (row.parentId == 0 ? null : row.parentId)
            formData.leaderId = row.leader?.id
            formData.sort = row.sort
            formData.remark = row.remark
        } else {
            title.value = '添加部门'
            isAdd.value = true

            formData.id = null
            formData.name = ''
            if (type == 'add') {
                formData.parentId = null
            } else if (type == 'addRow') {
                formData.parentId = row.id
            }
            formData.leaderId = null
            formData.sort = 1
            formData.remark = ''
        }
        formVisible.value = true;
    });
}

const addOrUpdate = () => {
    formRef.value.validate((isValidate, fields) => {
        if (isValidate) {
            formData.parentId = (formData.parentId == null ? 0 : formData.parentId)
            if (isAdd.value) {
                addReq(formData).then(res => {
                    if (res.code == 200) {
                        success("添加部门" + formData.name + "成功！");
                        props.queryTree();
                        closePage();
                    }
                })
            } else {
                updateReq(formData).then(res => {
                    if (res.code == 200) {
                        success("修改部门" + formData.name + "成功！")
                        props.queryTree();
                        closePage();
                    }
                })
            }
        }
    });
}

const formRef = ref()
const closePage = () => {
    formRef.value.resetFields();
    formVisible.value = false
}

const props = defineProps({
    queryTree: Function,
})

defineExpose({
    open,
})
</script>